/**
 * Created by liujie on 2017/10/19.
 */
;(function ($,window,undefined) {
    function Tab($this,options) {
        this.$elem = $this;
        this.options = $.extend({
            tabs:[
                {
                    title:"",
                    selected:true,
                    elemId:""
                }
            ],
            onSelect:function (tabId,title) {
                
            }
        },options)
    }
    Tab.prototype = {
        init:function () {
            var _this = this;
            var _$elem = this.$elem,
                _tabs = this.options.tabs;
            if(_tabs && _tabs.length){
                this.createTab(_tabs)
                this.initEvent();
            }
        },
        createTab:function (_tabs) {
            var headerDom='<div class="tab-box-header">' +
                '<div class="tab-box-header-container">' +
                '<div class="tab-nav-content">';
            var $bodyDom = $('<div class="tab-box-body"></div>');
            for(var i=0,_len = _tabs.length;i<_len;i++){
                var _tab = _tabs[i];
                headerDom += this.createHeadDom(_tab);
                $bodyDom.append(this.createBodyDom(_tab));
            }
            headerDom += '</div></div></div>';
            this.$elem.html(headerDom);
            this.$elem.append($bodyDom);

        },
        createHeadDom:function (tab) {
            if(tab.selected){
                return '<div class="tab-nav active" tabid="'+tab.elemId+'"><span>'+tab["title"]+'</span></div>';
            }else{
                return '<div class="tab-nav" tabid="'+tab.elemId+'"><span>'+tab["title"]+'</span></div>';
            }
        },
        createBodyDom:function (tab) {
            var _elem = $("#"+tab.elemId);
            if(tab.selected){
                _elem.css({"display":"block"});
            }
            return _elem;
        },
        initEvent:function () {
            var _this = this;
            var _$elem = _this.$elem;
            _$elem.off("click").on("click","div.tab-nav",function () {
                var $this = $(this);
                var _tabId = $this.attr("tabid");
                var _tabTitle = $this.find("span").text();
                var $children = _$elem.find("div.tab-box-body").children();
                if($this.hasClass("active")){
                    return false
                }
                _$elem.find("div.tab-nav").removeClass("active");
                $children.css({"display":"none"});
                $this.addClass("active");
                $("#"+_tabId).fadeIn(300);
                if(_this.options.onSelect && $.isFunction(_this.options.onSelect)){
                    _this.options.onSelect(_tabId,_tabTitle)
                }
            })
        }
    };
    
    $.fn.jqTab = function (options) {
        var $tab = this instanceof jQuery ? this : $(this);
        return $tab.each(function () {
            var tab = new Tab($tab,options);
            tab.init();
        });
    }
})(jQuery,window,undefined);